<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div class="app">
            <!-- 
             v-on:事件的名字 ，以后都是使用简写的方式@
             @click="getMessage():getMessage后面加上小括号代表的是，给回调函数传递参数
          -->
          <button @click="get1(888)">点击传递参数---一个参数</button>

            <!-- 
            指令:v-bind,v-model,v-on右侧双引号，别当真字符串，就是语法的要求

            双引号里面书写JS表达式，是JS东西  
            //字符串我爱你      我爱你 ->不是字符串   '我爱你'->这才是字符串
         -->
         <button @click="get2(888,'癞蛤蟆')">点击传递参数---二个参数</button>

            <!-- 
            事件对象的写法
            event:事件对象,鼠标位置、键盘码、阻止默认事件、阻止事件传播
        -->
        <button @click="get3(888,'癞蛤蟆',$event)">点击传递参数---多个参数</button>
        
        <button @click="get4">点击传递参数---0个参数</button>

        <!-- 这样书写代表传递参数，但是你没有传递参数，形参获取的变量数值为undefined -->
        <button @click="get5()">点击传递参数---0个参数</button>
    

          <!-- 
            目前get4没有传递参数   没有小括号
            事件回调函数默认注入事件对象

            @click="get($event)",这样代表的传递参数事件对象，回调才能获取到事件对象

            @click="get()" 这样书写代表传递参数，但是你没有传递参数，形参获取的变量数值为undefined
         -->

    </div>
</body>
</html>
<script>
    const VM = new Vue({
        el:'.app',
        methods:{
            get1(params){
                console.log(params)
            },
            get2(params1,params2){
                console.log(params1,params2)
            },
              //切记:如果想获取事件对象，可以通过注入$event获取，切记$必须要书写！！！！
            get3(params1,params2,e){
                console.log(params1,params2,e)
                //获取事件对象:$event:鼠标位置、键盘码、阻止默认事件、阻止事件传播等等
            },
            get4(e){
                console.log(e)
            },
            get5(params){
                console.log(params)
            }

        }
    })
</script>